<template>
  <div class="hm-interview">
    <div class="hm-interview-header">
      <router-link
        to="/main/interview/recommend"
        class="hm-interview-header-left"
        :class="{ active: !isRecommend }"
        >推荐</router-link
      >
      <router-link
        to="/main/interview/latest"
        class="hm-interview-header-right"
        :class="{ active: !isRecommend }"
        >最新</router-link
      >
      <!-- <div
        class="hm-interview-header-left"
        @click="handleRecommend"
        :style="{
          color: isRecommend ? '#fa6d1d' : '#333',
          borderBottom: isRecommend ? '2px solid #fa6d1d' : '2px solid #fff',
        }"
      >
        推荐
      </div>
      <div
        class="hm-interview-header-right"
        @click="handleLatest"
        :style="{
          color: isRecommend ? '#333' : '#fa6d1d',
          borderBottom: isRecommend ? '2px solid #fff' : '2px solid #fa6d1d',
        }"
      >
        最新
      </div> -->
      <div class="hm-interview-header-logo"></div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRecommend: true,
    };
  },
  methods: {
    handleRecommend() {
      this.isRecommend = true;
    },
    handleLatest() {
      this.isRecommend = false;
    },
  },
};
</script>

<style lang="less" scoped>
.hm-interview {
  width: 100%;
  height: 35px;
  //   background-color: red;
  border-bottom: 1px solid #e5e5e5;
  .hm-interview-header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 14px;
    .hm-interview-header-left {
      margin-right: 20px;
      color: #333; // 默认颜色为黑色
      cursor: pointer;
    }
    .hm-interview-header-right {
      margin-right: 20px;
      color: #333; // 默认颜色为黑色
      cursor: pointer;
    }
    .active {
      color: #fa6d1d; // 激活时的颜色
      border-bottom: 2px solid #fa6d1d;
    }
    .hm-interview-header-logo {
      background-image: url(../assets/logo.dbd40807.png);
      background-size: contain;
      background-repeat: no-repeat;
      width: 50px;
      height: 30px;
      position: absolute;
      right: 0;
    }
  }
}
// .router-link-exact-active {
//   color: #f06704;
//   border-bottom: 2px solid #f06704;
// }
</style>
